<template>
    <div>
        <!-- 头部部分 -->
        <div class="div1" v-show="tab == 1">
            <el-button class="b1" type="primary" size="mini" @click="BthGoodsOutbound()">出库</el-button>  
            <el-button class="b2" size="mini" @click="handleExport()">导出</el-button>  
            <span>出库时间：</span>
            <el-date-picker size="mini" style="width: 100px;" v-model="searchInfo.startTime"></el-date-picker>
            <span>--</span>
            <el-date-picker size="mini" style="width: 100px;" v-model="searchInfo.endTime"></el-date-picker>
            <span>  状态：</span>
            <el-select v-model="searchInfo.outState" placeholder="请选择" size="mini" style="width:120px">
                <el-option value ="0" label="全部" ></el-option>
                <el-option  
                     v-for="dict in dict.type.goods_out_state"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value">
                </el-option>
            </el-select>
            <el-input class="in1" prefix-icon="el-icon-search" v-model="searchInfo.searchGoodsName"  placeholder="请输入办公用品名称" style="width:155px" size="mini"></el-input>
            <el-button size="mini" type="primary" @click="searchOutbound()">搜索</el-button>
        </div>
       <!-- 主体部分 -->
    <div class="div2" v-show="tab == 1">
        <el-table v-loading="loading" :data="pageOutboundList.list" >
            <el-table-column label="申领人" prop="nickName" :show-overflow-tooltip="true"  />
            <el-table-column label="申领部门" prop="deptName" :show-overflow-tooltip="true"  />
            <el-table-column label="申领物品" prop="goodsName" :show-overflow-tooltip="true"  />
            <el-table-column label="使用方式" :show-overflow-tooltip="true" width="80px" >
                <template slot-scope="scope">
                    <span>{{scope.row.outUseType|filterGender}}</span>
                </template>
            </el-table-column>
            <el-table-column label="申领数量" prop="outNumber" :show-overflow-tooltip="true"  />
            <el-table-column label="当前库存" prop="goodsRemainderNumber" :show-overflow-tooltip="true"/>
            <el-table-column label="申领时间" :show-overflow-tooltip="true" width="160px">
                <template slot-scope="scope">
                    <span>{{scope.row.outApplicationTime|filterDateFormat1}}</span>
                </template> 
            </el-table-column>
            <el-table-column label="出库时间"  :show-overflow-tooltip="true" >
                <template slot-scope="scope">
                    <span>{{scope.row.outTime|filterDateFormat1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.outState|filterOutState}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" class-name="small-padding fixed-width">
            <template slot-scope="scope">
                <el-row>
                    <el-button
                    size="mini"
                    type="text"
                    @click="tabChange(2,scope.row)"
                    v-hasPermi="['system:notice:edit']"
                    >详情</el-button>
                    <!-- <el-button
                    v-if="scope.row.outState == '2' "
                    size="mini"
                    type="text"
                    @click="btnWarehousing(scope.row)"
                    v-hasPermi="['system:notice:edit']"
                    >催还</el-button> -->
                    <el-button
                    v-if="scope.row.outState == '1' "
                    size="mini"
                    type="text"
                    @click="bthOutboundGoods(scope.row)"
                    v-hasPermi="['system:notice:edit']"
                    >出库</el-button>
                    <el-button
                    v-if="scope.row.outState == '2' "
                    size="mini"
                    type="text"
                    @click="returnToStorage(scope.row)"
                    v-hasPermi="['system:notice:edit']"
                    >归还入库</el-button>
                </el-row>
                </template>
            </el-table-column>
        </el-table>
        
        <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pageOutboundList.pageNum"
        :limit.sync="pageOutboundList.pageSize"
        layout="prev, pager, next, jumper"
        @pagination="outboundList"
        />
        </div>
        <div>
        <el-dialog :title="title" :visible.sync="open">
            <el-form :model="outbound" size="mini" label-width="120px" :rules="rules">
                <el-row>
                    <el-col :span="12">
                       <el-form-item label="申领日期:">
                           <el-date-picker style="width:200px"  v-model="outbound.outApplicationTime"></el-date-picker>
                       </el-form-item>
                    </el-col>
                    <el-col :span="12">
                       <el-form-item label="申领人:" prop="collectionUnit">
                        <el-input v-model="user.userName" @click.native="btnGetShowTree()"></el-input>
                       </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                <el-col :span="12"> 
                    <el-form-item label="申请物品:" prop="collectionUnit">
                        <el-select v-model="outbound.outGoodsId" @change="getGoodsInfo" style="width:200px">
                            <el-option 
                            v-for="i in pageGoods.list"
                            :key="i.value"
                            :label="i.goodsName"
                            :value="i.goodsId"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="规格/型号:">
                        <el-input v-model="outbound.outGoodsType" :disabled="flag">></el-input>
                    </el-form-item>
                </el-col>
                </el-row>
                <el-row>
                <el-col :span="12">
                    <el-form-item label="使用方式:">
                        <el-input v-model="outbound.userTypeName" :disabled="flag"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="当前库存:">
                        <el-input v-model="outbound.outCurrentNumber" :disabled="flag"></el-input>
                    </el-form-item>
                </el-col>
                </el-row>
                <el-row>
                <el-col :span="12">
                    <el-form-item label="申请数量：" prop="collectionUnit">
                        <el-input v-model="outbound.outNumber"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="领取日期:" prop="collectionUnit">
                        <el-date-picker v-model="outbound.outReceiveTime" style="width:200px"></el-date-picker>
                    </el-form-item>
                </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="归还日期:" prop="collectionUnit">
                            <span v-if="outbound.outUseType == '2' ">无需归还</span>
                            <el-date-picker v-model="outbound.outReturnTime" v-if="outbound.outUseType == '1' || outbound.outUseType == '' " style="width:200px"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                            <el-form-item label="出库时间" prop="collectionUnit">
                                <el-date-picker v-model="outbound.outTime" style="width:200px"></el-date-picker>
                            </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                <el-col :span="24">
                    <el-form-item label="备注:">
                        <el-input v-model="outbound.outRemarks" type="textarea"></el-input>
                    </el-form-item>
                </el-col>
                </el-row>
            </el-form>
            <template slot="footer">
                <el-button type="primary" size="mini" @click="btnSaveOutbound()">确定</el-button>
                <el-button size="mini" @click="remove()">取消</el-button>
            </template>   
        </el-dialog>

        <el-dialog :title="userTitle" :visible.sync="openUser">
            <nav class="treeNav"> 
                <!-- <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="filterText">
                </el-input> -->
                <el-tree  :data="deptdata" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </nav>            
            <template slot="footer">
                <el-button type="primary" size="mini" @click="saveTree()">确定</el-button>
                <el-button size="mini" @click="removeTree()">取消</el-button>
            </template>   
        </el-dialog>
    </div>
    <div v-show="tab == 2">
        <div class="divDetail">
            <el-descriptions class="margin-top" :column="2" size="small" border>
                <el-descriptions-item>
                    <template slot="label">
                        申领日期
                    </template>
                    <span>{{outbound.outApplicationTime|filterDateFormat1}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        申领人
                    </template>
                    <span>{{outbound.nickName}}</span>
                </el-descriptions-item>d
                <el-descriptions-item>
                    <template slot="label">
                        申领物品
                    </template>
                    <span>{{outbound.goodsName}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        规格-型号
                    </template>
                    <span>{{outbound.goodsName}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        使用方式
                    </template>
                    <span>
                        {{outbound.outUseType|filterGender}}
                    </span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        当前库存
                    </template>
                    <span>{{outbound.goodsRemainderNumber}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        领取数量
                    </template>
                    <span>{{outbound.outNumber}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        领取日期
                    </template>
                    <span>{{outbound.outReceiveTime|filterDateFormat1}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        归还日期
                    </template>
                    <span>{{outbound.outReturnTime|filterDateFormat1}}</span>
                </el-descriptions-item>
                <el-descriptions-item> 
                    <template slot="label">
                        审批人
                    </template>
                    <span>{{outbound.goodsName}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        备注
                    </template>
                    <span>{{outbound.outRemarks}}</span>
                </el-descriptions-item>
                </el-descriptions>
            </div>
            <div class="divbtn1">
                <el-button class="but" @click="tabChange(1,outboundNull)" size="mini">返回</el-button>
            </div>
    </div>
    <!-- 出库 -->
    <div>
        <el-dialog title="办公物品出库" :visible.sync="openOutGoods" style="width: 50%;margin: 0 auto;">
            <el-row>
              <el-col :span="12">
                <span>
                    领取时间:<el-date-picker v-model="outbound.outTime" style="width: 100%" ></el-date-picker>
                </span>
              </el-col>
            </el-row>
            <template slot="footer">
                <el-button type="" @click="bthSaveoutboundGoods()">出库</el-button>
                <el-button type="" @click="bthCloseSaveoutboundGoods()">取消</el-button>
            </template>
        </el-dialog>
    </div>
</div>
</template>

<script>
import { goodsList , getGoodsRemainderNumbers} from "@/api/administration/goods/goods";
import { saveOutbound ,  listAll , updateOutState , updateOutboundOutState} from "@/api/administration/outbound/outbound";
import { getDeptList } from "@/api/system/dept";
import { getToken } from "@/utils/auth";

export default {
    name: 'RuoyiUiIndex',
    dicts:['goods_out_state'],
    data() {
        return {
            rules:{
                collectionUnit:[
                    { required: true,message:"必须填写该选项",trigger:'blur'}
                ], 
            },
            loading:true,
            outboundNull:{},
            outbound:{
                outGoodsType: '',
                outUseType:'',
                outReturnTime:'',
                outCurrentNumber:'',
                userTypeName:'',
                outUserId:'',
                outApplicationTime:'',
                outTime:'',
                outReceiveTime:'',
            },
            flag:false,
            user:{
                userName:''
            },
            goods:{},   
            pageGoods:{
                pageNum:1,
                pageSize:8,
            },
            pageOutboundList:{
                pageNum:1,
                pageSize:5,
            },
            searchInfo:{
                startTime:'',
                endTime:'',
                outState:'0',
                searchGoodsName:'',
            },
            outStart:[],
            total:0,
            tab:1,
            openUser:false,
            openOutGoods:false,
            userTitle:'',
            title:'',
            open:false,
            deptdata:[],
            defaultProps: {
                children: 'childList',
                label: 'name',  
            },            
        };
    },
    mounted() {
        this.outboundList();
    },
    methods: {
        //物品出库的查询
        getGoodsInfo(row){
            this.goods.goodsId = row;
            getGoodsRemainderNumbers(this.goods).then((rel=>{
                if(rel.code == 200){
                    let goodsData = rel.data;
                    console.log("获取到的数据"+goodsData.goodsUserType);
                    this.outbound.outGoodsType = goodsData.goodsType;
                    this.outbound.outUseType = goodsData.goodsUserType;
                    this.outbound.outCurrentNumber = goodsData.goodsRemainderNumber;
                    this.outbound.userTypeName = goodsData.goodsUserType == '1'?'借用':'领用';
                    this.flag = true;
                }
            }));
        },
        //取消物品出库弹窗
        remove(){
            this.open = false;
            this.flag = false;
            this.outbound = {};
        },
        //点击tree 获得所选入库人员信息
        handleNodeClick(data) {
            this.outbound.outUserId = data.id;
            this.user.userName = data.name;
        },
        // 展示物品管理信息
        listGoods(){
            this.loading = true;
            this.goods.goodsName = this.searchInfo.searchGoodsName;
            this.goods.pageNum = this.pageGoods.pageNum;
            this.goods.pageSize = this.pageGoods.pageSize;
            goodsList(this.goods).then(rel=>{
                this.pageGoods = rel.data;
                this.total = rel.data.total;
                this.loading = false;
            })
        },
        //removeTree 取消选择入库人员
        removeTree(){
            this.openUser = false;
            this.userTitle = "";
            this.user.userName = "";
            this.outbound.outUserId = "";
        },
        //点击出库按钮
        BthGoodsOutbound(){
            this.title = '物品出库';
            this.open = true;
            this.listGoods();
            this.outbound.outApplicationTime = this.getNowTime();
            this.outbound.outReceiveTime = this.getNowTime();
            this.outbound.outReturnTime = this.getNowTime();
            this.outbound.outTime = this.getNowTime();
        },
        //保存物品出库
        btnSaveOutbound(){
            saveOutbound(this.outbound).then(rel=>{
                if(rel.code == 200){
                    this.open = false;
                    this.outbound = {};
                    this.outboundList();
                }
            })
        },
        //展示出库列表
        outboundList(){
            this.loading = true;
            this.outbound.pageNum = this.pageOutboundList.pageNum;
            this.outbound.pageSize = this.pageOutboundList.pageSize;
            this.outbound.startTime = this.searchInfo.startTime;
            this.outbound.endTime = this.searchInfo.endTime;
            this.outbound.goodsName  = this.searchInfo.searchGoodsName;
            this.outbound.outState = this.searchInfo.outState; 
            listAll(this.outbound).then(rel=>{
                if(rel.code == 200){
                    this.loading = false;
                    this.pageOutboundList = rel.data;
                    this.total = rel.data.total;
                }
            })
        },
        //多条件插叙
        searchOutbound(){
            this.pageOutboundList.pageNum = 1;
            this.outboundList();
        },
        //切换页面数据---详情
        tabChange:function(e,row){
            this.outbound = row;
            this.tab = e;
		},
        //点击归还入库
        returnToStorage(row){
            this.$confirm('是否确定归还入库, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let state = row;
                state.outState = 3;
                updateOutState(state).then(rel=>{
                    if(rel.code >= 200){
                        this.$message({
                            type: 'success',
                            message: '归还成功!'
                        });
                        this.outboundList();
                    }
                })
              
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '取消入库'
                });          
                this.outboundList();
            });
        },
        /**
         * 所选出库人员 el-tree
         */
        //点击显示选择人员弹框
        btnGetShowTree(){
            this.openUser = true;
            this.userTitle = "选择入库人员";
            this.getTreeDept();
        },
        //获取属性结构
        getTreeDept(){
            getDeptList().then((rel=>{
                if(rel.code == 200){
                    this.deptdata = rel.data;
                }
            }))
        },
        //保存所选入库人员
        saveTree(){
            this.openUser = false;
            this.deptdata = null;
        },
        //导出
        handleExport(){
            this.download('administration/outbound/export',{...this.pageOutboundList}, `outbound_${new Date().getTime()}.xlsx`)
        },
        //点击出库
        bthOutboundGoods(row){
            this.outbound = row;
            this.openOutGoods = true;
        },
        //保存出库
        bthSaveoutboundGoods(){
            updateOutboundOutState(this.outbound).then(rel=>{
                if(rel.code == 200){
                    this.openOutGoods = false;
                    this.outboundList();
                    this.$message({
                            type: 'success',
                            message: '出库成功!'
                        });
                }
            })
        },
        //取消出库
        bthCloseSaveoutboundGoods(){
            this.openOutGoods = false;
            this.outboundList;
            this.outbound={};
        },

        /**公用方法 */
        //处理默认选中当前日期
        getNowTime() {
            var now = new Date();
            var year = now.getFullYear(); //得到年份
            var month = now.getMonth(); //得到月份
            var date = now.getDate(); //得到日期
            var hour =" 00:00:00"; //默认时分秒 如果传给后台的格式为年月日时分秒，就需要加这个，如若不需要，此行可忽略
            month = month + 1;
            month = month.toString().padStart(2, "0");
            date = date.toString().padStart(2, "0");
            var defaultDate = `${year}-${month}-${date}`;
            console.log(defaultDate)
            return defaultDate;
            this.$set(this.info, "stockDate", defaultDate);
        },
    },

    filters: {
        filterGender(val) {
            if (val == "1") {
                return "领用";
            } else if (val == "2") {
                return "借用";
            }
        },
        filterOutState(val){
            if( val == "1" ){
                return "未处理";
            } else if (val == "2" ) {
                return "已借用";
            } else if (val == "3") {
                return "已归还";
            } else if (val == "4") {
                return "已领用";
            }
        },
        filterDateFormat1(srcVal){
            if(!srcVal){
                return "";
            }
            return srcVal.toString().substr(0,19).replace("T", " ");
        },
        filterSorts(val,opt){
            let nodes = '';
            val = val+'' ;
            console.log(val);
            console.log(opt);
            opt.map(obj => {
                if(val === obj.goodsSortsId){   
                    nodes = obj.goodsSortsName;
                }
            })
            return nodes;
        },

    },
};
</script>

<style lang="scss" scoped>
    .div1 .b1{
        margin: 10px 10px 10px 32px;   
    }
    .div1 .b2{
        margin: 0px 48% 0px 0px;   
    }
    .div1 span{
        font-size : 12px;
    }
    .div1 .in1{
        margin: 0px 10px 0px 20px;
    }
    .div2{
        width: 95%;
        margin: 20px;
    }
    .divDetail{
        margin: 30px 30px 20px 20px;
        width: 95%;
    }
    .divbtn1{
        width: 95%;
        margin: 30px 30px 20px 20px;
    }
    .divbtn1  .but{
        float: right;
    }
</style>